<!DOCTYPE html> 
<html> 
<head> 
	<title>Blueprint</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.css' />
    <link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.print.css' media='print' />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script type='text/javascript' src='fullcalendar/jquery-ui-1.8.23.custom.min.js'></script>
	<script type='text/javascript' src='fullcalendar/fullcalendar.min.js'></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type='text/javascript'>

	$(document).ready(function() {
	
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		
		$('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			editable: true,
			events: [
				{
					title: 'All Day Event',
					start: new Date(y, m, 1)
				},
				{
					title: 'Long Event',
					start: new Date(y, m, d-5),
					end: new Date(y, m, d-2)
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: new Date(y, m, d-3, 16, 0),
					allDay: false
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: new Date(y, m, d+4, 16, 0),
					allDay: false
				},
				{
					title: 'Lunch',
					start: new Date(y, m, d, 12, 0),
					end: new Date(y, m, d, 14, 0),
					allDay: false
				},
				{
					title: 'Birthday Party',
					start: new Date(y, m, d+1, 19, 0),
					end: new Date(y, m, d+1, 22, 30),
					allDay: false
				},
				{
					title: 'Click for Google',
					start: new Date(y, m, 28),
					end: new Date(y, m, 29),
				}
			]
		});
		
	});

</script>
<style type='text/css'>

	body {
		margin-top: 40px;
		text-align: center;
		font-size: 14px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		}

	#calendar {
		margin: 0 auto;
		}

</style>
</head> 
<body> 

<div data-role="page">

	<div data-role="header" data-theme="b">
		<h1>Welcome to Blueprint</h1>
		<div data-role="controlgroup" data-type="horizontal">
			<div class="ui-btn-right">
				<a href="index.html" data-icon="gear" data-role="button" data-theme="d">Settings</a>
				<a href="index.html" data-icon="plus" data-role="button" data-theme="d">Add Task</a>
			</div>
		</div><!-- /controlgroup -->
	</div><!-- /header -->

	<div data-role="content" id='calendar'>			
	</div><!-- /content -->

	<div data-role="footer" data-theme="b"> 
		<h4>Change view panel</h4>
	</div> <!--/footer-->
	
	
	

	
</div><!-- /page -->

</body>
</html>